<template>
    <div class="continer">
        <div class="addCompanyBtn">
            <el-button type="primary" @click="addCompany">添加</el-button>
        </div>
        <div class="search">
            <el-form :model="search" ref="sc" @submit.native.prevent>
                <el-form-item label="" prop="name">
                    <el-input type="text" v-model="search.name" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="" prop="account" style="width: 210px;">
                    <el-input type="text" v-model="search.account" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="" prop="status" style="width: 210px;">
                    <!-- <el-input type="text" v-model="search.status" placeholder="请选择企业状态"></el-input> -->
                    <el-select v-model="search.status" placeholder="请选择">
                        <el-option
                          v-for="(item, index) in compEditStatus"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="getList()" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <div>
            <el-table v-loading="tableload" :data="listData" row-key="id" style="width:100%" border stripe>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="公司名称" prop="name"></el-table-column>
                <el-table-column label="法定代表人" prop="law_person"></el-table-column>
                <el-table-column label="联系人" prop="linkman"></el-table-column>
                <el-table-column label="联系电话" prop="tel"></el-table-column>
                <el-table-column label="状态" prop="status"></el-table-column>
                <el-table-column label="操作" width="300px">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="companyDetail(scope.row)">详情</el-button>
                        <el-button type="text" size="mini" @click="companyEdit(scope.row)">修改</el-button>
                        <el-button type="text" size="mini" @click="companyRizhi(scope.row)">日志</el-button>
                        <el-button type="text" size="mini" @click="companyDelete(scope.row)">删除</el-button>
                        <el-button type="text" size="mini" @click="addZhengshu(scope.row)">添加证书</el-button>
                        <el-button type="text" size="mini" @click="zhifu(scope.row.id)">支付记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper"
            :page-size="search.limit"
            :page-sizes="[10, 15, 20, 30]"
            :total="total"
            :current-page.sync="currentPage"
            @size-change="handleSizeChange"
            @current-change="toPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!-- 企业日志 -->
        <el-dialog title="日志" :visible.sync="rizhiShow" width="1000px">
            <el-table :data="rizhiList" style="width: 100%">
                <el-table-column prop="id" label="序号"> </el-table-column>
                <el-table-column prop="action" label="状态"> </el-table-column>
                <el-table-column prop="create_time" label="时间"> </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 添加证书 -->
        <el-dialog title="添加证书" :visible.sync="zsShow">
            <el-form :model="addZSlist" ref="zs" label-width="80px" :rules="addZSlistForm">
                <table style="width: 80%; margin: 0 auto;">
                    <tr>
                        <td>
                            <el-form-item label="证书 : " prop="file">
                                <el-upload
                                  :class="{disabled:uploadDisabled}"
                                  ref="upload"
                                  :action="BASE_URL+'/admin/file/upload/createfile'"
                                  list-type="picture-card"
                                  :on-success="handlesuccess"
                                  :on-remove="handleRemove">
                                  <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="标题 : " prop="title">
                                <el-input type="text" v-model="addZSlist.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="infor" @click="closeZS">取 消</el-button>
                <el-button type="primary" @click="addZS">确 认</el-button>
            </div>
        </el-dialog>
        <!-- 支付记录 -->
        <el-dialog title="支付记录" :visible.sync="showZhifu" width="85%">
            <el-button type="primary" @click='addZhifu'>添加</el-button>
            <el-table :data="zhifuList" style="width: 100%">
                <el-table-column prop="id" label="序号"> </el-table-column>
                <el-table-column prop="price" label="支付金额"> </el-table-column>
                <el-table-column prop="pay_time" label="支付时间"> </el-table-column>
                <el-table-column prop="term_start" label="期限开始时间"> </el-table-column>
                <el-table-column prop="term_end" label="期限结束时间"> </el-table-column>
                <el-table-column prop="term_end" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="zhifuDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showZhifu = false">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 添加支付记录 -->
        <el-dialog title="添加支付记录" :visible.sync="showAddZhifu" width="60%">
            <el-form :model="addZhifuInfo" ref="zf" label-width="150px" :rules="addZhifuInfoForm">
                <table style="width: 80%; margin: 0 auto;">
                    <tr>
                        <td>
                            <el-form-item label="支付金额 : " prop="price">
                                <el-input type="text" v-model="addZhifuInfo.price" placeholder="请输入价格"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="支付时间 : " prop="pay_time">
                                <el-date-picker
                                  v-model="addZhifuInfo.pay_time"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="期限开始时间 : " prop="term_start">
                                <el-date-picker
                                  v-model="addZhifuInfo.term_start"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="期限到期时间 : " prop="term_end">
                                <el-date-picker
                                  v-model="addZhifuInfo.term_end"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="infor" @click="addZhifuQuxiao">取 消</el-button>
                <el-button type="primary" @click="addZhifuClick">确 认</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="showCompanyEdit" width="60%">
            <el-form
                :model="companyEditForm"
                label-width="140px"
                ref="formRef"
                autocomplete="off"
                class="addCompanyForm"
            >
                <table>
                    <tr>
                        <td>
                            <el-form-item label="企业名称 : " prop="name">
                                <el-input v-model="companyEditForm.name" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="营业执照代码 : " prop="code">
                                <el-input v-model="companyEditForm.code" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="企业类型 : " prop="type">
                                <!-- <el-input v-model="companyEditForm.type" style="min-width: 280px;"></el-input> -->
                                <el-select v-model="companyEditForm.type" placeholder="请选择">
                                    <el-option
                                      v-for="item in gsTypes"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="注册资本(万元) : " prop="registered_assets">
                                <el-input v-model="companyEditForm.registered_assets" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="所属行业 : " prop="industry">
                                <!-- <el-input v-model="companyEditForm.industry" style="min-width: 280px;"></el-input> -->
                                <el-cascader v-model="hyValue" :options="hyOptions" :show-all-levels="false" @change="hyHandleChange"></el-cascader>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="注册时间 : " prop="register_time">
                                <!-- <el-input v-model="companyEditForm.register_time" style="min-width: 280px;"></el-input> -->
                                <el-date-picker
                                  v-model="companyEditForm.register_time"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="注册地址 : " prop="addr">
                                <el-input type="textarea" autosize v-model="companyEditForm.addr" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="办公行政区域 : " prop="area">
                                <el-input v-model="companyEditForm.area" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="园区 : " prop="zone">
                                <el-input v-model="companyEditForm.zone" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="联系人 : " prop="linkman">
                                <el-input v-model="companyEditForm.linkman" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="联系电话 : " prop="tel">
                                <el-input v-model="companyEditForm.tel" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="传真 : " prop="fax">
                                <el-input v-model="companyEditForm.fax" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="email : " prop="email">
                                <el-input v-model="companyEditForm.email" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="状态 : " prop="status">
                                <el-select v-model="companyEditForm.status" placeholder="请选择">
                                    <el-option
                                      v-for="(item, index) in compEditStatus"
                                      :key="index"
                                      :label="item.label"
                                      :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="infor" @click="showCompanyEdit = false;">取 消</el-button>
                <el-button type="primary" @click="editCompany">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getCompany, delCompany, addZhengshu, getLog, getPayLog, setPayLog, delPayLog, modifyInfo } from "../../../api/spaceManagement";
    import { BASE_URL } from "../../../config/app.js";
    import industryData from "../../../api/json/industry.json";

    export default {
        name: "companyManage",
        data() {
            return {
                tableload:false,
                listData: [],
                rizhiShow: false,
                rizhiList: [],
                // search
                search: {
                    name: "",
                    account: "",
                    status: '',
                    limit: 15,
                    page: 1
                },
                // 分页
                total: 0,
                currentPage: 1,
                // 添加证书
                zsShow: false,
                addZSlist: {
                    company_id: '',
                    file: '',
                    title: ''
                },
                addZSlistForm: {
                    file: [{ required: true, message: "请上传证书文件", trigger: "blur" }],
                    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
                },
                // 上传
                BASE_URL: "",
                uploadDisabled: false,
                // 支付记录
                showZhifu: false,
                zhifuList: [],
                showAddZhifu: false,
                addZhifuInfo: {
                    company_id	: '',
                    price: '',
                    pay_time: '',
                    term_start: '',
                    term_end: '',
                },
                addZhifuInfoForm: {
                    price: [{ required: true, message: "请输入价格", trigger: "blur" }],
                    pay_time: [{ required: true, message: "请输入支付时间", trigger: "blur" }],
                    term_start: [{ required: true, message: "请输入期限开始时间", trigger: "blur" }],
                    term_end: [{ required: true, message: "请输入期限到期时间", trigger: "blur" }],
                },
                company_id: '',
                // 修改
                showCompanyEdit: false,
                companyEditForm: {},
                compEditStatus: [
                    {
                        value: '1',
                        label: '通过审核'
                    },
                    {
                        value: '2',
                        label: '审核不通过'
                    },
                    {
                        value: '4',
                        label: '在孵'
                    },
                    {
                        value: '5',
                        label: '毕业'
                    },
                    {
                        value: '6',
                        label: '注销'
                    },
                    {
                        value: '7',
                        label: '清退'
                    }
                ],
                gsTypes:[
                	{value:"1",label:"合资"},
                	{value:"2",label:"独资"},
                	{value:"3",label:"国有"},
                	{value:"4",label:"私营"},
                	{value:"5",label:"全民所有制"},
                	{value:"6",label:"集体所有制"},
                	{value:"7",label:"股份制"},
                	{value:"8",label:"有限责任"},
                	{value:"9",label:"事业单位"}
                ],
                hyOptions: [],
                hyValue: [],
            };
        },
        methods: {
            // 获取入驻企业列表
            getList(){
                getCompany(this.search).then((response) => {
                    if(response.code == 0){
                        this.listData = response.data.list;
                        this.total = response.data.total;
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.error("数据获取失败");
                })
            },
            // 添加企业
            addCompany(){
                this.$router.push({ path: '/spaceManagement/addCompany' });
            },
            // 重置搜索框
            resetForm(name){
                this.$refs[name].resetFields();
            },
            // 操作
            companyDetail(row){ // 详情按钮
                this.$router.push({ path: '/spaceManagement/companyDetail', query: {id: row.id} });
                window.localStorage.setItem("account", row.user_id);
            },
            companyRizhi(row){ // 查看企业日志
                this.rizhiShow = true;
                getLog({ company_id: row.id }).then((response) => {
                    if(response.code){
                        this.$message.error(response.message);
                    }
                    this.rizhiList = response.data.list;
                }).catch(() => {
                    this.$message.error("数据获取失败");
                })
            },
            companyDelete(row){ // 删除企业
                this.$confirm("是否确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    delCompany({id: row.id}).then((response) => {
                        if(response.code == 0){
                            this.$message.success("删除成功");
                            this.getList();
                        }else{
                            this.$message.error(response.message);
                        }
                    }).catch(() => {
                        this.$message.error("删除失败");
                    })
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            },
            addZhengshu(row){ // 添加证书
                this.zsShow = true;
                this.addZSlist.company_id = row.id;
            },
            addZS(){ // 确认添加
                this.$refs['zs'].validate((valid) => {
                    if (!valid) {return false;}
                    addZhengshu(this.addZSlist).then((response) => {
                        if(response.code == 0){
                            this.zsShow = false;
                            this.$message.success("添加成功");
                        }else{
                            this.$message.error(response.message);
                        }
                    }).catch(() => {
                        this.$message.error("添加证书失败");
                    })
                })
            },
            closeZS(){ // 取消添加
                this.zsShow = false;
                this.uploadDisabled = false;
                this.$refs.upload.clearFiles();
                this.$refs['zs'].resetFields();
            },
            // 关闭企业日志
            close(){
                this.rizhiShow = false;
            },
            // 分页
            handleSizeChange(val){
                this.search.limit = val;
                this.getList();
            },
            toPage(val){
                this.currentPage = val;
                this.search.page = val;
                this.getList();
            },
            // 上传
            handlesuccess(response, file, fileList) {
                if(response.code == 0){
                    // this.addZSlist.file = "http://scapi.raysightiot.cn/" + response.data.key;
                    this.addZSlist.file = response.data.key;
                    this.uploadDisabled = true;
                }
            },
            handleRemove(file, fileList) {
                this.uploadDisabled = false;
                this.addZSlist.file = "";
            },
            // 支付记录
            zhifu(id){
                getPayLog({
                    company_id: id
                }).then((data) => {
                    if(data.code == 0){
                        this.showZhifu = true;
                        this.zhifuList = data.data.data;
                    }else{
                        this.$message.error(data.message);
                    }
                })
                this.addZhifuInfo.company_id = id;
                this.company_id = id;
            },
            addZhifu(){ // 添加支付记录
                this.showAddZhifu = true;
            },
            addZhifuClick(){ // 确认添加
                setPayLog(this.addZhifuInfo).then((data) => {
                    if(data.code == 0){
                        this.showAddZhifu = false;
                        this.zhifu(this.company_id);
                        this.addZhifuInfo.price = '';
                        this.addZhifuInfo.pay_time = '';
                        this.addZhifuInfo.term_start = '';
                        this.addZhifuInfo.term_end = '';
                    }else{
                        this.$message.error(data.message);
                    }
                })
            },
            addZhifuQuxiao(){
                this.showAddZhifu = false;
                this.addZhifuInfo.price = '';
                this.addZhifuInfo.pay_time = '';
                this.addZhifuInfo.term_start = '';
                this.addZhifuInfo.term_end = '';
            },
            zhifuDelete(row){ // 删除
                this.$confirm("是否确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    delPayLog({
                        id: row.id
                    }).then((res) => {
                        if(res.code == 0){
                            this.zhifu(this.company_id);
                        }else{
                            this.$message.error(res.message);
                        }
                    })

                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            },
            // 修改
            companyEdit(row){
                this.showCompanyEdit = true;
                this.companyEditForm = row;
                for(var a = 0; a < this.hyOptions.length; a++){
                    for(var b = 0; b < this.hyOptions[a].children.length; b++){
                        for(var c = 0; c < this.hyOptions[a].children[b].children.length; c++){
                            if(this.hyOptions[a].children[b].children[c].value == row.industry){
                                this.hyValue = [this.hyOptions[a].value, this.hyOptions[a].children[b].value, this.hyOptions[a].children[b].children[c].value];
                            }
                        }
                    }
                }
            },
            hyHandleChange(value){
                this.companyEditForm.industry = String(value[value.length-1]);
            },
            editCompany(){
                console.log(this.companyEditForm)
                modifyInfo(this.companyEditForm).then((data) => {
                    this.getList();
                    this.showCompanyEdit = false;
                    this.$message.success("修改成功");
                })
            }
        },
        created() {
            this.getList();
            this.BASE_URL = BASE_URL;
            this.hyOptions = industryData;
        }
    };
</script>

<style>
.addCompanyBtn{
    float: left;
    margin-bottom: 20px;
}
.fangjian{
    margin-right: 20px;
}
.roomNumText{
    margin-bottom: 20px;
}
.search{float: right;}
.search .el-form-item{margin-bottom: 20px; display: inline-block; margin-right: 15px;}
.txt_r {text-align: right;}
.disabled .el-upload--picture-card {
    display: none;
}
</style>
